<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="title" content="jQuery ui-Scrollable tabs plugin v1.0 by Aamir Afridi" />
        <meta name="keywords" content="jquery, tabs, scrollable, scroll, aamir, afridi, aamir afridi, js, javascript, script, plugin, jquery plugin, jq, tab">

        <title>jQuery UI Scrollable Tabs v2.0</title>
        <link type="text/css" href="https://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet" />
        <link type="text/css" href="css/jquery.scrollabletab.css" rel="stylesheet" />
        <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
        <script type="text/javascript" src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
        <script type="text/javascript" src="js/jquery.scrollabletab.js"></script>
        <script type="text/javascript" src="js/jquery.init.js"></script>
        <script type="text/javascript" src="js/jquery.mousewheel.js"></script>
        <style type="text/css">
            body{ font-size: 11px;font-family:"Helvetica Neue",HelveticaNeue,Helvetica,sans-serif; margin: 50px 70px;}
            p { font-size:13px}
            h2 {font-size:16px;}
            .tabs {width:600px;}
        </style>
    </head>
    <body style="margin-left:30%; margin-top:10px;">
    <br /><br />
    <div id="example_1" class="tabs">
        <ul>
            <li><a href="#tabs-1">Tab 1</a></li>
            <li><a href="#tabs-2">This is tab 2</a></li>
            <li><a href="#tabs-3">This is tab number 3</a></li>
            <li><a href="#tabs-4">Tab no 4</a></li>
            <li><a href="#tabs-5">And tab number 5</a></li>
            <li><a href="#tabs-6">Tab number 6</a></li>
            <li><a href="#tabs-7">And last tab number 7</a></li>
            <li><a href="#tabs-8">Very very long name 8</a></li>
            <li><a href="#tabs-9">Short name 9</a></li>
        </ul>
        <div id="tabs-1">Tab 1<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit vulputate porttitor. Fusce purus leo, faucibus a sagittis congue, molestie tempus felis. Donec convallis semper enim, varius sagittis eros imperdiet in. Vivamus semper sem at metus mattis a aliquam neque ornare. Proin sed semper lacus.</div>
        <div id="tabs-2">This is tab 2<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit vulputate porttitor. Fusce purus leo, faucibus a sagittis congue, molestie tempus felis. Donec convallis semper enim, varius sagittis eros imperdiet in. Vivamus semper sem at metus mattis a aliquam neque ornare. Proin sed semper lacus.</div>
        <div id="tabs-3">This is tab number 3<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit vulputate porttitor. Fusce purus leo, faucibus a sagittis congue, molestie tempus felis. Donec convallis semper enim, varius sagittis eros imperdiet in. Vivamus semper sem at metus mattis a aliquam neque ornare. Proin sed semper lacus.</div>
        <div id="tabs-4">Tab no 4<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit vulputate porttitor. Fusce purus leo, faucibus a sagittis congue, molestie tempus felis. Donec convallis semper enim, varius sagittis eros imperdiet in. Vivamus semper sem at metus mattis a aliquam neque ornare. Proin sed semper lacus.</div>
        <div id="tabs-5">And this is the tab number 5<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit vulputate porttitor. Fusce purus leo, faucibus a sagittis congue, molestie tempus felis. Donec convallis semper enim, varius sagittis eros imperdiet in. Vivamus semper sem at metus mattis a aliquam neque ornare. Proin sed semper lacus.</div>
        <div id="tabs-6">Tab number 6<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit vulputate porttitor. Fusce purus leo, faucibus a sagittis congue, molestie tempus felis. Donec convallis semper enim, varius sagittis eros imperdiet in. Vivamus semper sem at metus mattis a aliquam neque ornare. Proin sed semper lacus.</div>
        <div id="tabs-7">And last tab number 7<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit vulputate porttitor. Fusce purus leo, faucibus a sagittis congue, molestie tempus felis. Donec convallis semper enim, varius sagittis eros imperdiet in. Vivamus semper sem at metus mattis a aliquam neque ornare. Proin sed semper lacus.</div>
        <div id="tabs-8">Very very long name 8<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit vulputate porttitor. Fusce purus leo, faucibus a sagittis congue, molestie tempus felis. Donec convallis semper enim, varius sagittis eros imperdiet in. Vivamus semper sem at metus mattis a aliquam neque ornare. Proin sed semper lacus.</div>
        <div id="tabs-9">Short name 9<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit vulputate porttitor. Fusce purus leo, faucibus a sagittis congue, molestie tempus felis. Donec convallis semper enim, varius sagittis eros imperdiet in. Vivamus semper sem at metus mattis a aliquam neque ornare. Proin sed semper lacus.</div>
</div>
      
</body>
</html>